<template>
    <el-button type="primary" class="btn-collapse" :icon="iconCollapse" @click="controlCollapse"></el-button>
    <el-menu :uniqueOpened="true"
             :default-active="activePath"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             :collapse="isCollapse"
             router>
        <template v-for="menu in menuList" :key="menu.id">
            <sub-menu :menu="menu" ></sub-menu>
        </template>
    </el-menu>
</template>

<script>
    import { queryMenuTree } from '@/request/api';
    import { setSession} from '@/util/LocalStorageUtils';
    import SubMenu from './SubMenu.vue';
	export default {
	    data(){
            return {
                menuList : [],
                isCollapse : {
                    type : Boolean
                },
                iconCollapse : 'el-icon-arrow-right',
                activePath : ''
            }
        },
	    created () {
            this.initMenu();
            this.activePath = window.sessionStorage.getItem('activePath');

        },
        name: 'MyMenu',
        components : { SubMenu },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            initMenu(){
                queryMenuTree({}).then(res => {
                    if (res.code === '0000'){
                        this.menuList = res.data;
                        setSession("menuList",res.data)
                    }else {
                        this.$message.error(res.message)
                    }
                })
            },
            controlCollapse(){
                this.iconCollapse = this.isCollapse ? 'el-icon-arrow-left' : 'el-icon-arrow-right';
                this.isCollapse = !this.isCollapse;
            }
        }
	}

</script>

<style scoped>
    .btn-collapse{
        width: 100%;
    }
    .el-menu{
        border-right: none;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>
